<template>

  <el-input placeholder="关键字" prefix-icon="el-icon-search" v-model="input1" key="" @input="iconChange">
    <i slot="suffix" class="el-input__icon el-icon-close" v-if="isShow" @click="clearInputValue"></i>

  </el-input>

</template>
<style scoped>
.el-input {
  width: 20%;
  margin-left: 5%;
}
</style>
<script>

export default ({
  name: 'searchInput',
  data() {
    return {
      input1: '',
      isShow: false,

    };
  },
  methods: {
    iconChange() {
      if (this.input1) {
        this.isShow = true
        this.$store.commit("setPrint", { //传入仓库
          input2: this.input1

        });
      } else {
        this.isShow = false
        this.$store.commit("setPrint", { //传入仓库
          input2: this.input1
        });
      }
    },
    clearInputValue() {

      this.input1 = ''
      this.$store.commit("setPrint", { //传入仓库
        input2: this.input1

      });
    },


  },
  computed: {

  }
})
</script>
